<template>
  <view class="pages-view">
    <view class="pages-view-k">
      <view class="pages-view-k-index" @click="gotabbarfun(0)">
        <view class="pages-view-k-index-icom">
          <image
            class="imag-icon"
            v-if="tabbarvalue === 0"
            src="/static/home/tab_home_s.png"
            mode="widthFix"
          ></image>
          <image
            class="imag-icon"
            v-if="tabbarvalue !== 0"
            src="/static/home/tab_home_n.png"
            mode="widthFix"
          ></image>
        </view>
        <view
          class="pages-view-k-index-text"
          :class="tabbarvalue === 0 ? 'pages-view-k-index-text-select' : ''"
        >
          首页
        </view>
      </view>
      <view class="pages-view-k-index" @click="gotabbarfun(1)">
        <view class="pages-view-k-index-icom">
          <image
            class="imag-icon"
            v-if="tabbarvalue === 1"
            src="/static/home/tab_store_s.png"
            mode="widthFix"
          ></image>
          <image
            class="imag-icon"
            v-if="tabbarvalue !== 1"
            src="/static/home/tab_store_n.png"
            mode="widthFix"
          ></image>
        </view>
        <view
          class="pages-view-k-index-text"
          :class="tabbarvalue === 1 ? 'pages-view-k-index-text-select' : ''"
        >
          商品
        </view>
      </view>

      <view class="pages-view-k-index" @click="gotabbarfun(2)">
        <view class="pages-view-k-index-icom">
          <image
            class="imag-icon"
            v-if="tabbarvalue === 2"
            src="/static/home/tab_video_s.png"
            mode="widthFix"
          ></image>
          <image
            class="imag-icon"
            v-if="tabbarvalue !== 2"
            src="/static/home/tab_video_n.png"
            mode="widthFix"
          ></image>
        </view>
        <view
          class="pages-view-k-index-text"
          :class="tabbarvalue === 2 ? 'pages-view-k-index-text-select' : ''"
        >
          视频频道
        </view>
      </view>
      <!-- <view class="pages-view-k-index" @click.stop="gotabbarfun(1)">
        <view class="pages-view-k-index-icom">
       
          <image src="/static/home/shop.png" mode="widthFix"></image>
        </view>
        <view class="pages-view-k-index-text"> 商城 </view> -->
      <!-- #ifdef H5 -->

      <!-- <wx-open-launch-weapp id="launch-btn" class="launch-weapp-foolr" appid="wx2c119a1393644393"
					username="gh_658bb7bff80b" path="pages/guide/index" style=" z-index: 980; position: absolute;">
					<view v-is="'script'" type="text/wxtag-template"
						style="display:block;height:170px;width: 100%;z-index: 980; line-height: 170rpx;">
						<button style="height: 170px;width: 100%;z-index: 980; line-height: 170rpx;">点击跳转小程序</button>
					</view>
				</wx-open-launch-weapp> -->

      <!-- #endif -->
      <!-- </view> -->
      <view class="pages-view-k-index" @click="gotabbarfun(3)">
        <view class="pages-view-k-index-icom">
          <image
            class="imag-icon"
            v-if="tabbarvalue === 3"
            src="/static/home/tab_me_s.png"
            mode="widthFix"
          ></image>
          <image
            class="imag-icon"
            v-if="tabbarvalue !== 3"
            src="/static/home/tab_me_n.png"
            mode="widthFix"
          ></image>
        </view>
        <view
          class="pages-view-k-index-text"
          :class="tabbarvalue === 3 ? 'pages-view-k-index-text-select' : ''"
        >
          我的
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
const props = defineProps({
  value: {
    type: Number,
    default: () => {
      return 0;
    },
  },
});
const tabbarvalue = ref(props.value);
onShow(() => {
  // tabbarvalue.value = props.value
});

watch(props, (newValue, oldValue) => {
  if (newValue.value !== 1) {
    tabbarvalue.value = newValue.value;
  }
});
// const tabdate=ref(
// )

const myStyle = ref({
  width: "500rpx",
  height: "100rpx",
  padding: "12rpx",
  background: "red",
});

const gotabbarfun = (index) => {
  // #ifdef MP-WEIXIN
  switch (index) {
    case 0:
      uni.switchTab({
        url: "/pages/index/index",
      });
      break;
    case 1:
      uni.switchTab({
        url: "/pages/goodscate/index",
      });

      break;
    case 2:
      uni.switchTab({
        url: "/pages/video/index",
      });
      break;
    case 3:
      uni.switchTab({
        url: "/pages/my/index",
      });
      break;
    default:
      break;
  }
  // #endif
  // #ifdef H5
  switch (index) {
    case 0:
      uni.switchTab({
        url: "/pages/index/index",
      });
      break;
    case 1:
      uni.switchTab({
        url: "/pages/goodscate/index",
      });
      break;
    case 2:
      uni.switchTab({
        url: "/pages/video/index",
      });
      break;
    case 3:
      uni.switchTab({
        url: "/pages/my/index",
      });
      break;
    default:
      break;
  }
  // #endif
};
</script>

<style scoped lang="scss">
.u-page__item__slot-icon {
  width: 48rpx;
  height: 48rpx;
}

::v-deep .u-tabbar-item__text {
  font-size: 24rpx;
}

.u-tabbar-item {
  position: relative;
}

.launch-weapp-foolr {
  position: absolute !important;
  width: 100%;
  height: 150%;
  overflow: hidden;
  left: 0;
  top: 0;
  // margin-left: -125rpx;
  z-index: 990 !important;
  opacity: 0;
  // background-color: red;
  line-height: 140rpx !important;

  button {
    line-height: 140rpx !important;
  }
}

.index-bt {
  width: 100%;
}

::v-deep .u-tabbar--fixed {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.pages-view {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0;
  background: #ffffff;
  border-top: 1rpx solid #d9d9d9;

  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99999;
}

.pages-view-k {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  box-sizing: border-box;

  .pages-view-k-index {
    padding-top: 10rpx;
    flex: 1;
    text-align: center;
    position: relative;
    height: 100%;

    .pages-view-k-index-icom {
      height: 48rpx;
      .imag-icon {
        width: 48rpx;
        height: 48rpx;
        line-height: 48rpx;
      }
    }

    // image {

    // }

    .pages-view-k-index-text {
      font-family: PingFang HK, PingFang HK;
      font-weight: 400;
      font-size: 24rpx;

      color: #9e9e9e;
      line-height: 32rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .pages-view-k-index-text-select {
      color: #f3498b;
      // font-weight: bold;
    }
  }
}

/* #ifdef MP-WEIXIN */
::v-deep .u-tabbar__content {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* #endif */
</style>
